<link rel="stylesheet" href="./通用重置.css">
<style>
    body{
        position: relative;
    }
    #box{
        width: 302px;
        height: 20px;
        border: 1px black solid;
        border-radius: 10px;
        padding: 1px 0 0 1px;
        margin-left: 120px;
    }
    .box{
        width: 300px;
        height: 18px;
        background-color: red;
        border-radius: 9px;
    }
    #Boss{
        width: 100px;
        height: 20px;
        text-align: center;
        color: black;
        position: absolute;
        left: 10px;
        padding-top: 5px;
    }

</style>
<div id="Boss">宇智波鼬血量</div>
<div id="box">
    <div class="box"></div>
</div> 

<script>
// 页面中随机出现图片
 step1=setInterval(function(){
    // 造野怪 
    var imgObj = document.createElement('img')
    imgObj.src = './xly.gif'
    // 给野怪随机宽度
    var max = 150
    var min = 50
    imgObj.width = Math.floor(Math.random()*(max-min+1)+min)
    // 定位随机范围
    imgObj.style.position = 'absolute'
    var min = 0
    var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.width
    imgObj.style.left = Math.floor(Math.random()*(max-min+1)+min) + 'px'
    var max = (window.innerHeight || document.documentElement.clientHeight) - imgObj.width
    imgObj.style.top =  Math.floor( Math.random() * (max-min+1)+min ) + 'px'
    // 追加到页面
    document.body.appendChild(imgObj)
}, 1000);

step2=setInterval(function(){
    // 每秒扣血
    var xt = document.querySelector('.box')
    // console.log(xt)
    var boxWidth = xt.offsetWidth
    // console.log(boxWidth)
    boxWidth -= 5
    xt.style.width = boxWidth + 'px'
    if(boxWidth<=0){
        clearInterval(step1)
        clearInterval(step2)
        alert('Game over')
    }
},1000)

// 点击消失
// 给Body绑定点击事件
var bodyObj = document.body
// 事件处理函数
bodyObj.onclick = function(evt){
    // 获取事件对象
    var e = evt || window.event
    // 获取操作的标签
    var target = e.target || e.srcElement
    // 判断是不是img  是就删除
    if (target.nodeName === 'IMG'){
        bodyObj.removeChild(target)

    // 点击加血
    var xl = document.querySelector('.box')
    var boxwidth = xl.offsetWidth
    boxwidth += 5

    xl.style.width = boxwidth + 'px'
    }
}

</script>